<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-alert lvType="info" lvClosable="false">
  {{'common_config_service_network_tip_label' | i18n}}
</lv-alert>

<lv-tabs [(lvActiveIndex)]="activeIndex">
  <lv-tab lvTitle="{{'common_backup_network_config_label' | i18n}}" lvId='backup'>
    <ng-container *ngTemplateOutlet="expandTableTpl; context: { $implicit: tableDataBackup }">
    </ng-container>
  </lv-tab>
  <lv-tab lvTitle="{{'common_archived_network_config_label' | i18n}}" lvId='archived'>
    <ng-container *ngTemplateOutlet="expandTableTpl; context: { $implicit: tableDataArchived }">
    </ng-container>
  </lv-tab>
</lv-tabs>

<ng-template #expandTableTpl let-tableData>
  <lv-datatable
    [lvData]="tableData"
    #lvTable
    [lvScroll]="virtualScroll.scrollParam"
  >
    <thead>
    <tr>
      <th width="64px"></th>
      <th lvCellKey="manageIp">
        {{ 'common_manage_network_ip_label' | i18n }}
      </th>
      <th lvCellKey="port">
        {{ 'common_selected_port_label' | i18n }}
      </th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr>
        <td lvShowUnfold [(lvUnfold)]="item.expand" width="64px"></td>
        <td>
          {{ item.manageIp }}
        </td>
        <td>
          <lv-group class="type-tip" lvGutter="14px">
            <span>{{ item.port }}</span>
            <lv-group
              *ngIf="(item.port === 0 && activeIndex === 'backup')"
              lvGutter="4px"
            >
              <i lv-icon="lv-icon-status-failed" lvColorState="true"></i>
              <span style="color: #f45c5e;">
                    {{ 'common_selected_port_tip_label' | i18n }}
                  </span>
            </lv-group>
          </lv-group>
        </td>
      </tr>
      <tr *ngIf="item.expand" lvInnerUnfold>
        <td colspan="3" lvInnerUnfold>
          <lv-datatable
            [lvData]="item.ipPoolDtoList"
            lvStripe
            lvSize="small"
            lvSelectionMode="multiple"
            [lvSelection]="item.selection"
            lvCompareWith="ipAddress"
          >
            <thead>
            <tr>
              <th
                lvShowCheckbox
                width="64px"
                [lvRowsData]="item.ipPoolDtoList"
                (lvCheckChange)="checkChange(item)"
              ></th>
              <th>
                {{ 'common_optional_port_label' | i18n }}
              </th>
              <th>
                {{ 'common_ip_address_mask_label' | i18n }}
              </th>
            </tr>
            </thead>
            <tbody>
            <ng-container *ngFor="let v of item.ipPoolDtoList">
              <tr>
                <td
                  width="64px"
                  lvShowCheckbox
                  [lvRowData]="v"
                  (lvCheckChange)="checkChange(item)"
                ></td>
                <td>
                  <span lv-overflow>{{ v.ifaceName }}</span>
                </td>
                <td>
                  <span lv-overflow>{{ v.ipAddress }}</span>
                </td>
              </tr>
            </ng-container>
            </tbody>
          </lv-datatable>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </lv-datatable>
</ng-template>
